<template>
  <div :class="theme">
    <p>Window Width: {{ width }}px</p>
    <p>Device Type: {{ deviceType }}</p>
    <button @click="toggleTheme">Toggle Theme</button>
  </div>
</template>

<script>
import { computed } from 'vue';
import {useWindowSize} from "./vue3.hook.useWindowSize";
import {useTheme} from "./vue3.hook.useTheme";

export default {
  setup() {
    const { width } = useWindowSize();
    const { theme, toggleTheme } = useTheme();

    const deviceType = computed(() => {
      return width.value < 768 ? 'mobile' : 'desktop';
    });

    return {
      width,
      theme,
      deviceType,
      toggleTheme,
    };
  },
};
</script>

<style>
/* 样式同上 */
</style>